<select id="search-select" class="selectpicker" data-live-search="true"></select>

<button type="button" id="search-btn" class="btn btn-primary"><i class="fa fa-search fa-fw"></i> Search</button>

<script>
    var areaId = "110000";
    getDataSelect();

    function getDataSelect() {
        $.ajax({
            type: "GET",
            url: "/service/data/getDataSelect",
            async: false,
            success: function (res) {
                if (res.code == "suc") {
                    var html = "<option value=''>Search...</option>";
                    var data = res.data;
                    for (var i = 0; i < data.length; i++) {
                        var viewName = ""
                        var isArea = false;
                        if (data[i].view_name != "") {
                            viewName = "   (" + data[i].view_name + ")";
                        }

                        if (data[i].is_area == 1) {
                            isArea = true;
                        }

                        if (data[i].chart_type == 'month') {
                            if (isArea) {
                                html = html + "<option style='font-size: 13px' " +
                                        "value='/service/data/get_month_area_trend/" + data[i].prop + "/" + areaId
                                        + "' type='m' prop='" + data[i].prop + "' >"
                                        + data[i].cn_name + viewName + "</option>";
                            } else {
                                html = html + "<option style='font-size: 13px' value='/service/data/get_month_trend/" + data[i].prop
                                        + "' type='m' prop='" + data[i].prop + "' >"
                                        + data[i].cn_name + viewName + "</option>";
                            }

                        } else {
                            if (data[i].chart_type == 'year') {
                                if (isArea) {
                                    html = html + "<option style='font-size: 13px' " +
                                            "value='/service/data/get_year_area_trend/" + data[i].prop + "/" + areaId
                                            + "' type='y' prop='" + data[i].prop + "' >"
                                            + data[i].cn_name + viewName + "</option>";
                                } else {
                                    html = html + "<option style='font-size: 13px' value='/service/data/get_year_trend/" + data[i].prop
                                            + "' type='y' prop='" + data[i].prop + "' >"
                                            + data[i].cn_name + viewName + "</option>";
                                }
                            } else if (data[i].chart_type == 'quarter') {
                                if (isArea) {
                                    html = html + "<option style='font-size: 13px' " +
                                            "value='/service/data/get_quarter_area_trend/" + data[i].prop + "/" + areaId
                                            + "' type='q' prop='" + data[i].prop + "' >"
                                            + data[i].cn_name + viewName + "</option>";
                                } else {
                                    html = html + "<option style='font-size: 13px' value='/service/data/get_quarter_trend/" + data[i].prop
                                            + "' type='q' prop='" + data[i].prop + "' >"
                                            + data[i].cn_name + viewName + "</option>";
                                }

                            } else {
                                if (isArea) {
                                    html = html + "<option style='font-size: 13px' " +
                                            "value='/service/data/get_confiden_area_trend/" + data[i].prop + "/" + areaId
                                            + "' type='c' prop='" + data[i].prop + "' >"
                                            + data[i].cn_name + viewName + "</option>";
                                } else {
                                    html = html + "<option style='font-size: 13px' value='/service/data/get_confiden_trend/" + data[i].prop
                                            + "' type='c' prop='" + data[i].prop + "' >"
                                            + data[i].cn_name + viewName + "</option>";
                                }

                            }
                        }
                    }

                    $("#search-select").html(html);
                } else {
                    layer.msg('empty data')
                }
            }
        });
    }

    $("#search-btn").click(function () {
        var request = $("#search-select").val();
        console.log(request);
        if (request != "") {
            window.location.href = "/analytics/data?key=" + request;
        }
    })
</script>